<template>
  <div class="tab-bar">
    <!-- <template v-for="(item,index) in tabbarData" :key="index">
      <div class="tab-bar-item" 
          :class="{active:currentIndex === index}" 
          @click="itemClick(index,item)">
        <img v-if="currentIndex !== index" :src="getAssetURL(item.image)" alt="1">
        <img v-else :src="getAssetURL(item.imageActive)" alt="2">
        <span class="text">{{item.text  }}</span>
      </div>
    </template> -->
    <van-tabbar v-model="currentIndex"  active-color="#ff9854" >
      <template v-for="(item, index) in tabbarData" :key="item.path">
        <van-tabbar-item :to="item.path">
          <template #default>
            <span>{{ item.text }}</span>
          </template>
          <template  #icon>
            <img v-if="currentIndex !== index" :src="getAssetURL(item.image)" alt="">
            <img v-else :src="getAssetURL(item.imageActive)" alt="">
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
    <!-- <van-tabbar 
      v-model="currentIndex" 
      active-color="#ff9854" 
      route
    >
      <template v-for="(item, index) in tabbarData" :key="item.path">
        <van-tabbar-item :to="item.path" >
          <template #default>
            <span>{{ item.text }}</span>
          </template>
          <template #icon>
            <img v-if="currentIndex !== index" :src="getAssetURL(item.image)" alt="">
            <img v-else :src="getAssetURL(item.imageActive)" alt="">
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar> -->
  </div>
</template>
 <script setup>
 import tabbarData from '@/assets/data/tabbar';
 import {getAssetURL} from '@/utils/load_assets.js'
 import {ref,watch} from 'vue' 
 import {useRouter,useRoute} from 'vue-router'
 
 const currentIndex = ref(0)
 const router = useRouter()

 const itemClick = (index,item)=>{
  console.log("index",index,item,'item');
  currentIndex.value = index;
  // console.log("item.path",item.path);
  router.push(item.path)
}

 </script>
 <style lang="less" scoped>
 
 .tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;

  border-top: 1px solid #f3f3f3;

  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 36px;
    }
    
    .text {
      font-size: 12px;
      margin-top: 2px;
    }
  }
}
 </style>